<template>
  <div class="diary">
    <div class="diary-content-user-title">
      <nuxt-link to="/diary" rel="nofollow">
        <div class="diary-content-user-title-text">
          日记
        </div>
      </nuxt-link>

      <div class="diary-content-user-title-icon" />
      <div class="diary-content-user-title-detils-text">
        日记详情
      </div>
    </div>
    <div class="diary-content">
      <div class="diary-content-left">
        <div class="diary-content-user-wrap">
          <UserTwo :datas="diaryData" />
          <div v-if="diaryData.product" class="diary-content-user-project">
            <div class="diary-content-user-project-title">
              相关项目
            </div>
            <Product :datas="diaryData" />
          </div>
          <div class="diary-content-doctor">
            <div class="diary-content-doctor-title">
              主治医师
            </div>
            <Doctor :datas="diaryData.doctor" />
          </div>
          <div class="diary-content-before">
            <div class="diary-content-before-title">
              术前照片
            </div>
            <div class="diary-content-before-photo-wrap">
              <div v-for="item in diaryData.album.images" :key="item.image_id">
                <img :src="item.thumbnail_url" :alt="setTitle()" :title="setTitle()" class="diary-content-before-photo-item">
              </div>
            </div>
          </div>
        </div>
        <div class="diary-list">
          <div class="diary-list-wrap">
            <div v-for="item in diaryListData" :key="item.diary_id" class="diary-list-item">
              <div class="diary-list-item-header">
                <img src="~assets/img/bookmark-icon.png" class="diary-list-item-icon" :alt="setTitle()" :title="setTitle()">
                <div class="diary-list-item-header-wrap">
                  <div class="diary-list-item-header-left">
                    <div class="diary-list-item-header-day">
                      术后第<p> {{ item.day_num }}</p>天
                    </div>
                    <div class="diary-list-item-header-product">
                      {{ item.product ? item.product.project_name : item.project[0].project_name }}
                    </div>
                  </div>
                  <div class="diary-list-item-header-right">
                    第{{ item.diary_num }}篇日记
                  </div>
                </div>
              </div>

              <div class="diary-list-item-img">
                <img v-for="(i, index) in item.album.images" :key="i.album_id" :alt="setTitle()" :title="setTitle()" :src="i.thumbnail_url" @click="showBigImg(item.album.images, index)">
              </div>
              <div class="diary-list-content">
                <div ref="diaryText" class="diary-process-list-content-text" :class="{'active-class':item.status}">
                  <p>{{ item.diary_content }}</p>
                </div>
                <div class="diary-isOpen">
                  <div />
                  <div class="diary-Open-wrap">
                    <div v-if="item.status" class="diary-Open-content" @click="item.status = false">
                      <div class="diary-Open-text">
                        查看全文
                      </div>
                      <div class="diary-Open-icon-bottom" />
                    </div>
                    <div v-if="item.status===false" class="diary-Open-content" @click="item.status = true">
                      <div class="diary-Open-text">
                        收起全文
                      </div>
                      <div class="diary-Open-icon-top" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="diary-content-right">
        <div class="diary-content-right-header">
          <div class="diary-content-right-header-left">
            其他相关内容
          </div>
          <nuxt-link to="/diary" rel="nofollow">
            <div class="diary-content-right-header-right">
              <div class="diary-content-right-header-right-text">
                更多
              </div>
              <div class="diary-content-right-header-right-icon" />
            </div>
          </nuxt-link>
        </div>
        <div v-for="item in RecommendData" :key="item.diary_group_id">
          <diaryCover :datas="item" />
        </div>
      </div>
    </div>
    <BigImg v-if="imgShow" :list="imgList" :index="imgIndex" @closeBigImg="closeBigImg" />
  </div>
</template>
<script>
import UserTwo from '@/components/userTwo'
import { getDiaryData, getDiaryList, getRecommendDiary } from '@/api/diaryDetails.js'
import diaryCover from '@/components/diaryCover'
import Product from '@/components/product'
import Doctor from '@/components/doctor'
import BigImg from '@/components/bigImg'
export default {
  components: {
    UserTwo,
    Product,
    Doctor,
    diaryCover,
    BigImg
  },
  async asyncData({ isDev, route, store, env, params, query, req, res, redirect, error }) {
    const [diaryData, diaryListData, RecommendData] = await Promise.all([
      getDiaryData(params.details).then((res) => {
        return res.data
      }),
      getDiaryList(params.details).then((res) => {
        return res.data
      }),
      getRecommendDiary(params.details).then((res) => {
        return res.data
      })
    ])
    return {
      diaryData,
      diaryListData,
      RecommendData
    }
  },
  data() {
    return {
      imgList: [],
      imgIndex: 0,
      imgShow: false
    }
  },
  computed: {

  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.diaryText.forEach((item, i) => {
        this.isopen(item, i)
      })
    })
  },
  methods: {
    // 判断是否添加展开
    isopen(item, i) {
      if (item.offsetHeight >= 45) {
        this.$set(this.diaryListData, i, Object.assign({}, this.diaryListData[i], { status: true }))
      } else {
        this.$set(this.diaryListData, i, Object.assign({}, this.diaryListData[i], { status: null }))
      }
    },
    showBigImg(list, i) {
      this.imgList = list
      this.imgIndex = i
      this.imgShow = true
    },
    closeBigImg() {
      this.imgList = []
      this.imgIndex = 0
      this.imgShow = false
    },
    setTitle() {
      return this.diaryData.project[0].project_name
    }
  },
  head() {
    // console.log(this.diaryData, this.diaryListData)
    return {
      title: `【多图|第${this.diaryData.update_days}天】${this.diaryData.user.user_name}的${this.diaryData.diary_group_title}真实整形日记分享_${this.diaryData.hospital.user_name}_容猫医美`,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: `【多图 | 第 ${this.diaryData.update_days} 天】${this.diaryData.user.user_name} 的 ${this.diaryData.diary_group_title}真实整形日记分享_
       ${this.diaryData.hospital.user_name}为其提供${this.diaryData.project[0].parent_list[0] ? this.diaryData.project[0].parent_list[0].class_name : ''},${this.diaryData.project[0].parent_list[1] ? this.diaryData.project[0].parent_list[1].class_name : ''},${this.diaryData.project[0].parent_list[2] ? this.diaryData.project[0].parent_list[2].class_name : ''}等整形项目
       ，共${this.diaryData.update_days} 天真实完美记录${this.diaryData.diary_group_title}的整形日记分享`
        }, {
          name: 'keywords', content: `${this.diaryData.project[0].parent_list[0] ? this.diaryData.project[0].parent_list[0].class_name : ''},${this.diaryData.project[0].parent_list[1] ? this.diaryData.project[0].parent_list[1].class_name : ''},${this.diaryData.project[0].parent_list[2] ? this.diaryData.project[0].parent_list[2].class_name : ''},
          ${this.diaryData.doctor.user_attributes.hospital_name} , ${this.diaryData.user.user_name} ,整形日记 `
        }, {
          'http-equiv': 'mobile-agent', content: 'format=html5', url: `https://m.rongcat.com/diary/${this.$route.params.details}`
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.diary {
  width: 100%;
  background: rgba(246, 246, 246, 1);
  .diary-content {
    width: 1190px;
    margin: 0 auto;
    padding-bottom: 30px;
    overflow: hidden;
    display: flex;
  }
}
.diary-content-user-title {
  width: 1190px;
  height: 54px;
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 8px 0 0 30px;
}
.diary-content-user-title-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
}
.diary-content-user-title-text:hover {
  cursor: pointer;
}
.diary-content-user-title-detils-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(80, 76, 255, 1);
  line-height: 20px;
}
.diary-content-user-title-icon {
  width: 4px;
  height: 8px;
  background: url("~assets/img/right-icon.png") center center no-repeat;
  background-size: 100% 100%;
  margin-left: 10px;
  margin-right: 10px;
}
.diary-content-user-wrap {
  width: 840px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  padding: 10px 30px 0;
  .diary-content-user-project {
    margin-top: 20px;
    .diary-content-user-project-title {
      font-size: 16px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
    }
  }
  .diary-content-doctor {
    margin-top: 20px;
    .diary-content-doctor-title {
      font-size: 16px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
    }
  }
  .diary-content-before {
    margin-top: 20px;
    display: flex;
    .diary-content-before-title {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
    }
    .diary-content-before-photo-wrap {
      margin-left: 35px;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      .diary-content-before-photo-item {
        width: 219px;
        height: 221px;
        border-radius: 4px;
        object-fit: cover;
        margin-right: 8px;
        margin-bottom: 10px;
      }
    }
  }
}
.diary-list {
  width: 840px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  margin-top: 10px;
  padding: 19px 14px 33px;
}
.diary-list-wrap {
  width: 100%;
  height: 100%;
  border-left: 1px solid rgba(246, 246, 246, 1);
}
.diary-content-right {
  width: 340px;
  height: 1167px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  padding: 0 20px;
  margin-left: 10px;
  .diary-content-right-header {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .diary-content-right-header-left {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
    }
    .diary-content-right-header-right:hover {
      cursor: pointer;
    }
    .diary-content-right-header-right {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: rgba(216, 216, 216, 1);
      line-height: 22px;
      display: flex;
      align-items: center;
      .diary-content-right-header-right-icon {
        width: 8px;
        height: 8px;
        background: url("~assets/img/more-icon.png") center center no-repeat;
        background-size: 100% 100%;
        margin-left: 4px;
      }
    }
  }
}
.diary-list-item-header {
  margin-top: 20px;
  position: relative;
  .diary-list-item-icon {
    width: 11px;
    height: 11px;
    position: absolute;
    left: -6px;
    top: 10px;
  }
  .diary-list-item-header-wrap {
    display: flex;
    justify-content: space-between;
    margin-left: 13px;
  }
  .diary-list-item-header-left {
    display: flex;
    .diary-list-item-header-day {
      width: 124px;
      height: 32px;
      background: rgba(246, 246, 246, 1);
      border-radius: 16px;
      padding-top: 5px;
      padding-bottom: 7px;
      padding-left: 20px;
      padding-right: 20px;
      font-size: 14px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
      > p {
        display: inline-block;
        color: #5146ff;
      }
    }
    .diary-list-item-header-product {
      font-size: 14px;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      line-height: 22px;
      margin-left: 10px;
      margin-top: 6px;
    }
  }
  .diary-list-item-header-right {
    font-size: 14px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 22px;
    margin-top: 5px;
  }
}
.diary-list-item-img {
  margin-left: 13px;
  display: flex;
  flex-wrap: wrap;
  img {
    width: 180px;
    height: 126px;
    border-radius: 4px;
    margin-right: 19px;
    margin-top: 12px;
    object-fit: cover;
    cursor: pointer;
  }
}
.diary-list-content {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 22px;
  margin-left: 13px;
  margin-top: 10px;
  .diary-process-list-content-text {
    word-break: break-all;
  }
}
.diary-isOpen {
  display: flex;
  justify-content: space-between;
}
.diary-Open-wrap {
  color: #504cff;
  .diary-Open-icon-bottom {
    width: 8px;
    height: 4px;
    background: url("~assets/img/down-bottom-icon.png") center center no-repeat;
    background-size: 100% 100%;
    margin-left: 2px;
  }
  .diary-Open-icon-top {
    width: 8px;
    height: 4px;
    background: url("~assets/img/down-top-icon.png") center center no-repeat;
    background-size: 100% 100%;
    margin-left: 2px;
  }
}
.diary-Open-wrap:hover {
  cursor: pointer;
}
.diary-Open-content {
  display: flex;
  align-items: center;
}
.active-class {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
